<template>
	<view class="big-box">
		<!-- 顶部盒子 -->
		<view class="top-box">
			<view class="top-box-title">
				消息
				<!-- 未读消息条数 -->
				<view class="no-read-meg">
					({{messageLength}})
				</view>
			</view>
			<view class="top-box-tool">
				<!-- 消息全部已读(橡皮擦) -->
				<view class="top-tool-read">
					<image class="pic-item" src="../../static/pic/message/read.png"></image>
				</view>
				<!-- 查询(放大镜) -->
				<view class="top-tool-search">
					<image class="pic-item" src="../../static/pic/message/search.png" mode=""></image>
				</view>
				<!-- 更多工具(＋) -->
				<view class="more">
					<image class="pic-item" src="../../static/pic/message/moretool.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 工具盒子 -->
		<view class="tool-box">
			<!-- 活动优惠 -->
			<view class="tool-box-youhui">
				<view class="tool-box-youhui-length">
					3
				</view>
				<view class="tool-box-youhui-top">
					<view class="tool-box-youhui-huodong-pic">
						<image class="pic-item" src="../../static/pic/message/youhui.png" mode=""></image>
					</view>
					<view class="tool-box-youhui-huodong">
						活动优惠
						<view class="tool-box-youhui-huodong-after">

						</view>
					</view>
				</view>
				<view class="tool-box-youhui-bottom">
					<view class="tool-box-youhui-content">
						<view class="tool-box-youhui-content-title">
							发现同款低价
						</view>
						<view class="tool-box-youhui-content-check">
							立即查看
						</view>
					</view>
					<view class="tool-box-youhui-pic">
						<image class="pic-item" src="../../static/pic/message/youhui-doll.png" mode=""></image>
					</view>
				</view>

			</view>
			<!-- 物流 -->
			<view class="tool-box-wuliu tool-box-item">
				<view class="tool-box-item-title">
					物流
				</view>
				<view class="tool-box-item-pic">
					<image class="pic-item" src="../../static/pic/message/wuliu.png" mode=""></image>
				</view>
			</view>
			<!-- 售后 -->
			<view class="tool-box-shouhou tool-box-item">
				<view class="tool-box-item-title">
					售后
				</view>
				<view class="tool-box-item-pic">
					<image class="pic-item" src="../../static/pic/message/shouhou.png" mode=""></image>
				</view>
			</view>
			<!-- 提醒 -->
			<view class="tool-box-tixing tool-box-item">
				<view class="tool-box-item-title">
					提醒
				</view>
				<view class="tool-box-item-pic">
					<image class="pic-item" src="../../static/pic/message/tixing.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 消息盒子 -->
		<view class="msg-box">
			<!-- 消息内容 -->
			<view class="msg-content">
				<!-- 广告盒子 -->
				<view class="msg-item" :class="item.isSetTop" v-for="item of msgArr" :key="item.id"
					@click="toMsgDetail(item.adType,item.id)">
					<!-- 头像 -->
					<view class="msg-item-pic" :class="item.adType == 3 ? 'kfBgColor': 'norBgColor'">
						<image class="pic-item" :class="item.userPic ? 'full-pic' : ''" :src="item.picSrc" mode="">
						</image>
					</view>
					<!-- 信息内容 -->
					<view class="msg-item-info">
						<!-- 标题/时间 -->
						<view class="msg-item-info-top">
							<view class="msg-item-info-title">
								{{item.title}}
								<view class="msg-item-info-title-more" :style="getTitleMore(item.activityType)">
									{{item.activity}}
								</view>
							</view>
							<view class="msg-item-info-time">
								{{item.time}}
							</view>
						</view>

						<!-- 内容/消息数 -->
						<view class="msg-item-info-bottom">
							<view class="msg-item-info-msg">
								{{item.message}}
							</view>
							<view class="msg-item-info-type" :style="getCloseBtnBg(item.adType)">
								<image v-if="isAD(item.adType)" class="pic-item"
									src="../../static/pic/message/close.png" mode=""></image>
								<view v-if="isMsg(item.msgsLen)" class="msg-item-info-length">
									{{item.msgsLen}}
								</view>
							</view>
						</view>

					</view>

					<view class="adv-box">

					</view>
				</view>
				<!-- 消息 -->
				<!-- <view class="msg-item">

				</view> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				messageLength: 0,
				msgArr: [{
						id: 'ad1234115235',
						picSrc: "../../static/pic/message/AD.png",
						userPic: false,
						title: "满200减20",
						message: "独岛保温水乳套餐仅售138元",
						// 1是消息 2是广告 3是客服
						adType: 2,
						time: '',
						activity: '活动 >',
						// 1广告 2关系 3消息
						activityType: 1,
						isSetTop: "set-top",
						msgsLen: 0
					},
					{
						id: 'user16709678545235',
						// picSrc: "../../static/pic/message/user.png",
						picSrc: "../../static/image/user/user01.jpg",
						userPic: true,
						title: "张三",
						message: "这个怎么样",
						// 1是消息 2是广告 3是客服
						adType: 1,
						time: '2024/07/11',
						activity: '亲情',
						// 1广告 2关系 3消息
						activityType: 2,
						isSetTop: "set-top",
						msgsLen: 3
					},
					{
						id: 'user63838945235',
						// picSrc: "../../static/pic/message/user.png",
						picSrc: "../../static/image/user/user02.jpg",
						userPic: true,
						title: "李四",
						message: "吃饭了吗?",
						// 1是消息 2是广告 3是客服
						adType: 1,
						time: '13:52',
						activity: '',
						// 1广告 2关系 3消息
						activityType: 3,
						isSetTop: "",
						msgsLen: 5
					},
					{
						id: 'shop14157259022',
						picSrc: "../../static/pic/message/shangpu.png",
						userPic: false,
						title: "啥都送免费送书店",
						message: "已发货,请及时签收",
						// 1是消息 2是广告 3是客服
						adType: 1,
						time: '昨天',
						activity: '',
						// 1广告 2关系 3消息
						activityType: 3,
						isSetTop: "",
						msgsLen: 1
					},
					{
						id: 'kefu8431564231',
						picSrc: "../../static/pic/message/kehu.png",
						userPic: false,
						title: "官方客服",
						message: "我在,有需要随时找我",
						// 1是消息 2是广告 3是客服(主要用于添加背景色)
						adType: 3,
						time: '2分钟前',
						activity: '',
						// 1广告 2关系 3消息
						activityType: 3,
						isSetTop: "",
						msgsLen: 2
					},
				]
			};
		},
		methods: {
			toMsgDetail(num, id) {
				let url = null;
				if (num == 1) {
					url = "/subpkg/chat-detail/chat-detail?user_id=" + id
				}
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			getTitleMore(num) {
				if (num == 1) {
					return {
						color: 'rgb(254, 82, 98)',
						backgroundColor: 'rgb(250,236,240)',
					}
				} else if (num == 2) {
					return {
						color: 'rgb(156,156,156)',
						backgroundColor: 'rgb(242,242,242)',
					}
				} else {
					return {}
				}
			},
			getCloseBtnBg(num) {
				if (num == 2) return {
					backgroundColor: 'rgb(237,237,237)'
				}
				else return {}
			},
			isAD(num) {
				if (num == 2) return true
				else return false
			},
			isMsg(num) {
				if (num != 0) return true
				else return false
			},
			getAllMsgLen() {
				this.msgArr.map(data => {
					this.messageLength += data.msgsLen
				})
			}
		},
		mounted() {
			this.getAllMsgLen();
		}
	}
</script>

<style lang="scss" scoped>
	.big-box {
		height: 100%;
		width: 100%;
		margin: 0;
		display: flex;
		flex-direction: column;

		.pic-item {
			width: 100%;
			height: 100%;
		}

		.kfBgColor {
			background: linear-gradient(to right, rgb(250, 192, 91), rgb(249, 155, 79)),
				// background-color: rgb(251, 155, 79);
		}

		.norBgColor {
			background-color: rgb(248, 105, 38);
		}
	}

	.top-box {
		width: 96%;
		height: 80rpx;
		padding: 2%;
		padding-bottom: 0;
		display: flex;
		justify-content: space-between;

		.top-box-title {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 50rpx;
			font-weight: 600;

			.no-read-meg {
				margin-left: 20rpx;
				font-size: 26rpx;
			}
		}

		.top-box-tool {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 250rpx;

			.top-tool-read {
				height: 60rpx;
				width: 60rpx;
				cursor: pointer;
			}

			.top-tool-search {
				height: 60rpx;
				width: 60rpx;
				cursor: pointer;
			}

			.more {
				height: 60rpx;
				width: 60rpx;
				cursor: pointer;
			}
		}

	}

	.tool-box {
		width: 96%;
		padding: 0 2%;
		margin: 10rpx 0;
		height: 220rpx;
		display: flex;

		.tool-box-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			border-radius: 30rpx;
			margin-right: 15rpx;
			height: 100%;
			background-color: rgb(247, 247, 247);
			cursor: pointer;

			.tool-box-item-title {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 80rpx;
				font-weight: 600;
			}

			.tool-box-item-pic {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 30rpx;
				height: 60rpx;
				width: 60rpx;
			}
		}

		.tool-box-youhui {
			position: relative;
			display: flex;
			flex-direction: column;
			border-radius: 30rpx;
			margin-right: 15rpx;
			background-color: rgb(253, 239, 239);
			padding: 10rpx;
			width: 300rpx;
			cursor: pointer;

			.tool-box-youhui-length {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 40rpx;
				height: 40rpx;
				background-color: rgb(245, 103, 34);
				border-radius: 40rpx;
				color: #fff;
				font-size: 26rpx;
			}

			.tool-box-youhui-top {
				display: flex;
				height: 40%;
				align-items: center;

				.tool-box-youhui-huodong {
					position: relative;
					margin-left: 10rpx;
					color: rgb(254, 82, 98);
					font-size: 30rpx;
					letter-spacing: 1rpx;
					font-weight: 600;
				}

				.tool-box-youhui-huodong-pic {
					height: 40rpx;
					width: 40rpx;
				}

				.tool-box-youhui-huodong::after {
					position: absolute;
					top: 16rpx;
					right: -20rpx;
					content: "";
					width: 10rpx;
					height: 10rpx;
					border-right: 2rpx solid rgba(254, 82, 98, .8);
					border-bottom: 2rpx solid rgba(254, 82, 98, .8);
					transform: rotate(-45deg);
					/* 添加过渡 */
					transition: all .4s;
				}

			}

			.tool-box-youhui-bottom {
				display: flex;
				height: 60%;

				.tool-box-youhui-content {
					display: flex;
					flex-direction: column;

					.tool-box-youhui-content-title {
						flex: 1;
						font-weight: 600;
					}

					.tool-box-youhui-content-check {
						flex: 1;
						font-size: 26rpx;
						color: rgb(150, 96, 110);
						letter-spacing: 1rpx;
					}
				}

				.tool-box-youhui-pic {
					width: 100rpx;
					height: 100rpx;
				}
			}
		}

		.tool-box-wuliu {
			width: 120rpx;
			color: rgb(67, 144, 255);
		}

		.tool-box-shouhou {
			width: 120rpx;
			color: rgb(246, 116, 64);
		}

		.tool-box-tixing {
			width: 120rpx;
			color: rgb(255, 144, 0);
		}

	}

	// 置顶
	.set-top {
		background-color: rgb(248, 248, 248);
	}

	.adv-box {}

	.msg-box {
		width: 100%;

		.msg-item:hover {
			background-color: rgb(237, 237, 237);
		}

		.msg-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			width: 96%;
			height: 120rpx;
			padding: 2%;
			border-bottom: 4rpx solid rgb(248, 248, 248);
			cursor: pointer;

			.pic-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 60%;
				height: 60%;
			}

			.msg-item-pic {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: row;
				width: 100rpx;
				height: 100rpx;
				border-radius: 30rpx;
			}

			.full-pic {
				width: 100%;
				height: 100%;
				border-radius: 30rpx;
			}

			.msg-item-info {
				margin-left: 20rpx;
				width: 80%;

				.msg-item-info-top {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.msg-item-info-title {
						display: flex;
						align-items: center;
						font-size: 36rpx;
						letter-spacing: 2rpx;

						.msg-item-info-title-more {
							font-weight: 600;
							margin-left: 20rpx;
							font-size: 26rpx;
							padding: 6rpx;
						}
					}

					.msg-item-info-time {
						display: flex;
						justify-content: flex-end;
						font-size: 26rpx;
						color: rgb(180, 180, 180);
					}
				}

				.msg-item-info-bottom {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-end;
					margin-top: 10rpx;

					.msg-item-info-msg {
						letter-spacing: 1rpx;
						font-size: 28rpx;
						color: rgb(150, 150, 150);
					}

					.msg-item-info-type {
						display: flex;
						justify-content: center;
						align-items: center;
						width: 40rpx;
						height: 40rpx;
						border-radius: 40rpx;

						.pic-item {
							width: 60%;
							height: 60%;
						}

						.msg-item-info-length {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 26rpx;
							width: 100%;
							height: 100%;
							background-color: rgb(245, 103, 34);
							border-radius: 40rpx;
							color: #fff;
						}
					}
				}

			}

		}
	}
</style>